<template>
  <Panel title="信息脱敏能力" class="panel">
      <div class="df">
        <div>
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span @click="rou" slot="title">数据脱敏</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-document"></i>
                <span @click="rou2" slot="title">脱敏规则</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span @click="rou3" slot="title">数据分类</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span @click="rou4" slot="title">数据分级</span>
              </el-menu-item>
            </el-menu>
        </div>
        <div class="f1 main">
          <div>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/callermanagement/callermanagement' }">数据库脱敏</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/callermanagement/callermanagement6' }">结果查询</el-breadcrumb-item>
                <el-breadcrumb-item>数据库操作审计</el-breadcrumb-item>
              </el-breadcrumb>
          </div>
          <div>
            数据库脱敏
          </div>
          <el-form inline :model="searchData">
            <!-- 订单号 -->
            <el-form-item label="任务名称">
              <el-input size="mini" v-model="searchData.rulename"></el-input>
            </el-form-item>
            <!-- 收货人 -->
            <!-- 按钮 -->
            <el-form-item>
              <el-button type="primary" size="mini" @click="search123">查询</el-button>
              <el-button type="info" size="mini" @click="reset123">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="header df jcsb ">
            <!-- 新建分组 -->
            <div class="newAPI df jcc aic" @click="newAPI">+新建任务</div>
            <div class="newAPI df jcc aic" @click="newAPI2">脱敏设置</div>
            <div class="time df jcr aic">

            </div>
          </div>
          <div id="caller" ref="tables" class="caller">
            <!-- 表格    -->
            <el-table class="tatle" :header-cell-style="{background: '#EBF2F9'}"  :data="tableData" stripe  style="width: 100%" ref="table">         
<!--              &lt;!&ndash; api名称 &ndash;&gt;-->
<!--              <el-table-column prop="name" label="启用/禁用任务" width="300" >-->

<!--              </el-table-column>  -->

              <el-table-column prop="status" label="启用禁用任务" width="150">
                <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.status"
                      :active-value="1"
                      :inactive-value="0"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="changeSwitch(scope.row.status)"
                  />
                </template>
              </el-table-column>
              <!-- 请求方式   -->
              <el-table-column  prop="rulename" label="规则名" width="200" column-key="rulename">    
              </el-table-column>  
              <!-- 创建时间   -->
              <el-table-column prop="datasouce"  label="数据源/数据目标" width="300" column-key="datasouce">    
              </el-table-column>
              <!--API数量  -->
              <el-table-column prop="num"  label="脱敏周期" width="200" column-key="num">    
              </el-table-column>
              <!-- 描述 -->
              <!--  操作  -->
              <el-table-column label="操作" width="200">
                <template slot-scope="scope" >
                  <div class="df">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <el-button size="mini" @click="handleEdit(scope.row)" class="caozuo df jcc aic"><i class="iconfont icon-bianji"></i></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <el-button size="mini"  @click="handleDelete(scope.row.id)" class="caozuo df jcc aic"><i class="iconfont icon-shanchu"></i></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="查看" placement="top">
                      <el-button size="mini"  @click="handlechakan(scope.row)" class="caozuo df jcc aic"><i class="el-icon-view"></i></el-button>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 编辑弹出框 -->
            <el-dialog title="设置" :visible.sync="dialogTableVisible1">
              <el-divider content-position="left">基本信息</el-divider>
              <el-form label-position="right" :model="editData">
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                  <el-input v-model="editData.rulename " autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="执行周期" :label-width="formLabelWidth">
                  <el-input v-model="editData.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                  <el-input v-model="editData.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">数据库设置</el-divider>

                <el-form-item label="数据库类型" :label-width="formLabelWidth">
                  <el-select v-model="editData.value" placeholder="请选择">
                    <el-option
                        v-for="item in editData.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="数据库地址" :label-width="formLabelWidth">
                  <el-input v-model="editData.dbaddr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数据库名称" :label-width="formLabelWidth">
                  <el-input v-model="editData.dbname" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">登录设置</el-divider>

                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="editData.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="editData.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="savetoConfigure">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 新建分组弹框 -->
            <el-dialog title="新建任务" :visible.sync="dialogTableVisible2" width="40%">
              <el-divider content-position="left">基本信息</el-divider>
              <el-form label-position="right" :model="editData">
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                  <el-input v-model="editData.rulename " autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="执行周期" :label-width="formLabelWidth">
                  <el-input v-model="editData.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                  <el-input v-model="editData.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">数据库设置</el-divider>

                <el-form-item label="数据库类型" :label-width="formLabelWidth">
                  <el-select v-model="editData.value" placeholder="请选择">
                    <el-option
                        v-for="item in editData.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="数据库地址" :label-width="formLabelWidth">
                  <el-input v-model="editData.dbaddr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数据库名称" :label-width="formLabelWidth">
                  <el-input v-model="editData.dbname" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">登录设置</el-divider>

                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="editData.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="editData.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible2 = false" >取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog title="脱敏设置" :visible.sync="dialogTableVisible3" width="40%">
              <el-divider content-position="left">基本信息</el-divider>
              <el-form label-position="right" :model="editData">
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                  <el-input v-model="editData.rulename " autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="执行周期" :label-width="formLabelWidth">
                  <el-input v-model="editData.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                  <el-input v-model="editData.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">数据库设置</el-divider>

                <el-form-item label="数据库类型" :label-width="formLabelWidth">
                  <el-select v-model="editData.value" placeholder="请选择">
                    <el-option
                        v-for="item in editData.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="数据库地址" :label-width="formLabelWidth">
                  <el-input v-model="editData.dbaddr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数据库名称" :label-width="formLabelWidth">
                  <el-input v-model="editData.dbname" autocomplete="off"></el-input>
                </el-form-item>
                <el-divider content-position="left">登录设置</el-divider>

                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="editData.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="editData.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible2 = false" >取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <!-- 分页 -->
          <el-pagination
              style="margin-top: 30px"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[3, 5, 10, 20]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </div>
  </Panel>
</template>

<script>
import Panel from "@/components/panel/Panel";
import {GROUP_REG} from "@/utils/reg";
  export default {
    components: {
    Panel,
    },
    methods: {
      changeSwitch(status){
        //调用后台修改接口
        console.log(value);
      },
      rou(){
        this.$router.push(
          {
            path:'/callermanagement/callermanagement'
          }
        )
      },
      rou2(){
        this.$router.push(
          {
            path:'/callermanagement/callermanagement2'
          }
        )
      },
      rou3(){
        this.$router.push(
          {
            path:'/callermanagement/callermanagement3'
          }
        )
      },
      rou4(){
        this.$router.push(
          {
            path:'/callermanagement/callermanagement4'
          }
        )
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },  //查询
      search123() {
        this.tableData = [   {
          status:1,

          name:"788",
          datasouce: "sql_ztx  → sql_ztx1",
          rulename: '测试脱敏334',
          num: '每天',
          time: '2022-11-26',
          remark: '1111111'
        }]
      },
      //重置
      reset123() {
        this.searchData =    {
          status:'',

          name:"",
          datasouce: "",
          rulename: '',
          num: '',

        };
        this.tableData = [
          {
            status:1,
            name:"456",
            datasouce: "sql_lgd  → sql_lgd1",
            rulename: '测试脱敏332',
            num: '每天',
            time: '2022-11-24',
            remark: '1111111'
          },
          {
            status:1,

            name:"ssfa",
            datasouce: "sql_ymb  → sql_ymb1",
            rulename: '测试脱敏333',
            num: '手动执行',
            time: '2022-11-23',
            remark: '1111111'
          },
          {
            status:1,

            name:"788",
            datasouce: "sql_ztx  → sql_ztx1",
            rulename: '测试脱敏334',
            num: '每天',
            time: '2022-11-26',
            remark: '1111111'
          },
          {
            status:1,

            name:"jjj",
            datasouce: "sql_lqs  → sql_lqs1",
            rulename: '测试脱敏335',
            num: '手动执行',
            time: '2022-11-24',
            remark: '1111111'
          },
        ]
      },
      //改变时间
      timeChange(){
        console.log(this.createTime)
        let startTime = this.createTime[0]+' 00:00:00'
        let endTime = this.createTime[1]+' 23:59:59'

      },
      ruwry(){
        console.log(this.newAPIData.api_type);
      },
      getClientWidth(){
        console.log(this.$refs.tables.offsetWidth)
        console.log(this.$refs.propsModel.offsetWidth)
        this.$refs.propsModel.style.width=this.$refs.tables.offsetWidth+'px'
      },
      // 新建分组
      newAPI(){
        this.dialogTableVisible2 = true;
      },      newAPI2(){
        this.dialogTableVisible3 = true;
      },
      // 新建分组-添加
      submitForm(){
        this.$refs.RuleForm.validate(async (valid) => {
          if (valid) {
            // let res = await addAccount(this.AddRuleForm);

            // //判定 注册成功后,进行跳转到指定页面
            // if (res.code == 0) {
            //   this.$router.push("/account/account-list");
            // }
          } else {
            //不通过
            this.$message.error("添加失败");
          }
        });
      },
      // 删除
      handleDelete(id) {
        this.$confirm("确定删除？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        // .then(async () => {
        //   let res = await goodsDel({ id });
        //   if (res.code == 0) {
        //     this.getGoodsList();
        //   }
        // })
        // .catch(() => {
        //   this.$message({
        //     type: "info",
        //     message: "已取消删除"
        //   });
        // });
      },
      // 查看
      handlechakan(row) {
        this.dialogTableVisible1 = true;
        this.editData = { ...row };
      },
      // 编辑
      handleEdit(row) {
        this.dialogTableVisible1 = true;
        this.editData = { ...row };
      },
      // 编辑-保存修改
      saveEdit() {
        this.$confirm("确定修改？是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
            .then(() => {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });
        });
        // .then(async () => {
        //   let { code } = await editAccount(this.editData);
        //   console.log(code);
        //   if (code == 0) {
        //     this.dialogTableVisible = false;
        //     // 刷新页面
        //     this.getDataList();
        //   }
        // })
        // .catch(() => {
        //   this.$message({
        //     type: "info",
        //     message: "已取消删除"
        //   });
        // });
      },
      savetoConfigure(){
        this.$confirm("确定修改？是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
            .then(() => {
              this.$message({
                type: 'success',
                message: '已完成API配置，下一步请提交审核!'
              });
            }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });
        });
        // .then(async () => {
        //   let { code } = await editAccount(this.editData);
        //   console.log(code);
        //   if (code == 0) {
        //     this.dialogTableVisible = false;
        //     // 刷新页面
        //     this.getDataList();
        //   }
        // })
        // .catch(() => {
        //   this.$message({
        //     type: "info",
        //     message: "已取消删除"
        //   });
        // });
      },
      //获取api列表
      // async getOrderData() {
      // let { data, total } = await getOrderList({
      //   currentPage: this.currentPage,
      //   pageSize: this.pageSize,

      //   // 查询数据
      //   orderNo: this.searchData.orderNo,
      //   consignee: this.searchData.consignee,
      //   phone: this.searchData.phone,
      //   orderState: this.searchData.orderState,
      //   date:
      //     this.searchData.date == null
      //       ? JSON.stringify([])
      //       : JSON.stringify(this.searchData.date),
      // });

      // //处理时间格式
      // data.forEach((v) => {
      //   v.orderTime = moment(v.orderTime).format("YYYY-MM-DD hh:mm:ss");
      //   v.deliveryTime = moment(v.deliveryTime).format("YYYY-MM-DD hh:mm:ss");
      // });

      // //赋值渲染
      // this.tableData = data;
      // this.total = total;
      // },
      //改变第几页
      handleCurrentChange(val) {
        this.currentPage = val;
        // this.getCateData();
      },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter("method");
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.service_provider;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column["property"];
        return row[property] === value;
      },
    },
    data() {
      //验证api名称
      let checkName = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入分组名称"));
        } else if (!GROUP_REG.test(value)) {
          //正则验证
          callback(
              new Error("输入长度在10个之内,只能包含字母、数字和汉字")
          )
        } else {
          callback();
        }
      };
      return {
        createTime:[new Date(),new Date()],
        //创建时间
        pickerOptions: {
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
        //搜索
        // 搜索框
        searchData: {
          rulename:"",
          orderNo: "",
          consignee: "",
          phone: "",
          orderState: "",
          date: []
        },
        search:"",
        // value: "",
        //输入框
        formLabelWidth: "120px",
        value2:true,
        // 编辑弹出框
        dialogTableVisible1:false,
        // 新建分组弹框
        dialogTableVisible2:false,
        dialogTableVisible3:false,
        innerVisibleProvider:false,
        currentPage: 1, //表示当前显示的页码
        pageSize: 5, //每一页显示的条数
        total: 150, //总条数
        apigroup:[],//分组
        rules: {
          name:{required: true,validator: checkName, trigger: "blur"},
        },

        tableData: [
          {
            status:1,
            name:"456",
            datasouce: "sql_lgd  → sql_lgd1",
            rulename: '测试脱敏332',
            num: '每天',
            time: '2022-11-24',
            remark: '1111111'
          },
          {
            status:1,

            name:"ssfa",
            datasouce: "sql_ymb  → sql_ymb1",
            rulename: '测试脱敏333',
            num: '手动执行',
            time: '2022-11-23',
            remark: '1111111'
          },
          {
            status:1,

            name:"788",
            datasouce: "sql_ztx  → sql_ztx1",
            rulename: '测试脱敏334',
            num: '每天',
            time: '2022-11-26',
            remark: '1111111'
          },
          {
            status:1,

            name:"jjj",
            datasouce: "sql_lqs  → sql_lqs1",
            rulename: '测试脱敏335',
            num: '手动执行',
            time: '2022-11-24',
            remark: '1111111'
          },
        ],
        // 编辑弹框数据
        editData: {

          value:"",
          rulename:"",
          num:"",
          describe: "",
          options: [{
            value: '选项1',
            label: 'ORACLE'
          }, {
            value: '选项2',
            label: 'SQLSERVER',

          }, {
            value: '选项3',
            label: 'DB2'
          }, {
            value: '选项4',
            label: 'GBASE'
          }, {
            value: '选项5',
            label: 'HIVE  '
          }, {
            value: '选项6',
            label: 'MYSQL  '
          }, {
            value: '选项7',
            label: '达梦  '
          }, {
            value: '选项8',
            label: 'PostgreSQL    '
          }, {
            value: '选项9',
            label: '优炫 '
          }, {
            value: '选项10',
            label: '人大金仓  '
          }, {
            value: '选项11',
            label: 'MongoDB  '
          }],
          dbaddr:"",
          dbname:"",
          username:"",
          password:""
        },
        // 新建API弹框数据
        newAPIData:{
          api_name:"",
          method: "",
          api_type: "",
          api_group_id: "",
          datasouce: "",
          modify_time:"",
          service_provider: "",
          creator: "",
          url:"",
          secret_id:"",
          secret_key:"",
          describe:"",
          auth_params_info:"",
          app_name:"",
          historical_call:"",
          api_status:"",
          average_duration:"",
          success_rate:"",
          failure_rate:"",
          param_key:"",
          param_value:"",
          forward:"是",

        },
        // 新建分组
        api_group_info:{
          id:"",
          name:"",
          datasouce:"",
          rulename:"",
          num:'',
          remark :"",
        },
      };

    },
  }
</script>

<style  scoped>
.header{
  margin-bottom: 8px;
}
/* 创建时间 */
.demonstration{
  margin-right: 10px;
}
.block{
  margin-right: 8px;
}
/* 操作按钮 */
.caozuo{
  width: 30px;
  text-align: center;
  border-radius: 50%;
}

.el-table /deep/.caret-wrapper,.el-table /deep/.el-table__column-filter-trigger{opacity :0;}
.el-table:hover /deep/.caret-wrapper,.el-table:hover /deep/.el-table__column-filter-trigger{opacity:1;}
.el-icon-search{opacity: 0;}
.el-table:hover .el-icon-search{opacity: 1;}
.newAPI{
  width: 114px;
  height: 34px;
  background: #33BDFC;
  border: 1px solid rgba(51,189,252,1);
  border-radius: 3px;
  color: #fff;
}
.el-dialog{
  width: 500px;
}
.ggg{
  width: 500px;
}
/* /deep/.el-popover{
  width: 200px !important;
} */
/* .el-popover /deep/.el-input__inner{
 width: 150px;
} */

.el-input.is-disabled /deep/.el-input__inner {
  background-color: #fff !important;

}

.dynamic-header{
  position: absolute;
  height: 150px;
  top:198px;
  left: 20px;
  background-color: #fff;
  z-index: 3000;
  /* border: 1px solid red; */
  box-shadow:-5px 5px  8px 1px rgba(0, 0, 0, 0.2) ;

}
/* 表格 */
.tatle{
  margin-bottom: 10.5%;
}
/* 分页 */
.el-pagination /deep/.el-pagination__sizes{
  margin-right: 63% !important;
}
/* 弹框 */
.el-dialog__wrapper /deep/.el-dialog__header{
  /* background-color: antiquewhite; */
  /* padding: 0 10px; */
  margin: 0 30px;
  border-bottom: 1px solid #E5E5E5;
}
.el-dialog{
  position: relative;
}
.el-dialog__wrapper /deep/.el-dialog__header::before{
  position: absolute;
  left: 30px;
  top: 23px;
  content: "";
  display: block;
  clear: both;
  width: 2px;
  height: 18px;
  background-color: rgb(34, 180, 216);
}
.left{
  width: 150px;
}
.leftOne{
  width: 100px;
  height: 30px;
  background-color: rgb(17, 157, 212);
  color: red;
}
.caller{
  margin-top: 15px;
}
.group{
  color: black;
  font-weight: 700;
}
.group1{
  color: black;
  font-weight: 400;
}
.rgmain{
  width: 75%;
}
</style>

